import React, { Component } from 'react'
import { connect } from 'dva';
import { ImgBg, TypeText, DescText, Image } from '../styled';
import bg from '@/assets/images/archives/bg.png';
import { message } from 'antd';


interface Props {
  dispatch?: Function;
  image: string;
  imageHover?: string;
  title: string;
  desc: string;
  left: string;
  onClick?: Function;
  uploadFile?: boolean;
  file?: {
    message: string;
    url: string;
  },
  imageValue?: {
    url: string;
    message: string;
  };
  tabsKey?: string;
  setEntrance?: Function;
}

@connect(({ upload }) => ({
  file: upload.fileValue || {},
  imageValue: upload.imgValue || {},
}))
export default class Entrance extends Component<Props, any> {
  state = {
    fileUrl: ''
  }

  uploadFile(e) {
    e.persist();
    const { dispatch } = this.props;
    const targetFile = e.target.files[0];
    dispatch({
      type: targetFile.type === 'application/pdf' ? 'upload/uploadFile' : 'upload/uploadImg',
      payload: targetFile
    })
      .then(() => {
        const { file, imageValue } = this.props;
        if (targetFile.type === 'application/pdf') {
          file.message === 'success' && this.setState({ fileUrl: file.url }, () => {
            this.modifyDevice(this.state.fileUrl)
          })
        } else {
          imageValue.message === 'success' && this.setState({ fileUrl: imageValue.url }, () => {
            this.modifyDevice(this.state.fileUrl)
          })
        }
      })
  }
  modifyDevice(url) {
    const { dispatch, tabsKey, setEntrance } = this.props;
    let value;
    switch (tabsKey) {
      case 'outdoorItem':
        value = { outdoorItem: [{ url: url }] }
        break;
      case 'indoorItem':
        value = { indoorItem: [{ url: url }] }
        break;
      case 'autoOutfireItem':
        value = { autoOutfireItem: [{ url: url }] }
        break;
      case 'gasOutfireItem':
        value = { gasOutfireItem: [{ url: url }] }
        break;
      case 'foamSystemItem':
        value = { foamSystemItem: [{ url: url }] }
        break;
      case 'autoFireAlarmSystemItem':
        value = { autoFireAlarmSystemItem: [{ url: url }] }
        break;
      case 'smokeExhaustSystemItem':
        value = { smokeExhaustSystemItem: [{ url: url }] }
        break;
      case 'smokeControlSystemItem':
        value = { smokeControlSystemItem: [{ url: url }] }
        break;
      case 'otherSystemItem':
        value = { otherSystemItem: [{ url: url }] }
        break;
    }

    dispatch({
      type: 'archives_devices/modifyDevice',
      payload: value,
    }).then(() => setEntrance())
  }

  render() {
    const { image, imageHover, title, desc, left, onClick, uploadFile = false } = this.props;
    return (
      <ImgBg url={bg} left={left} onClick={onClick} hoverSrc={imageHover}>
        {uploadFile ? <input style={{ opacity: 0, width: 330, height: 300, zIndex: 10, position: 'absolute', cursor: 'pointer' }}
          onChange={(e) => {
            this.uploadFile(e)
          }}
          onClick={(event) => { event.target.value = null }}
          type='file'
        /> : null}
        <Image defaultSrc={image} />
        <TypeText>{title}</TypeText>
        <DescText>{desc}</DescText>
      </ImgBg>
    )
  }

}